<template>
    <div style="width: 100%;">
        <div v-if="visible" style="margin: 20px 15px;">
            <Cell v-for="item in searchData" :key="item.id" center inset border >
                <template #icon>
                    <img :src="prefix+item.groupIcon" class="avatar-icon" />
                </template>
                <template #title>
                    <span class="span-name">{{item.groupName}}</span>
                </template>
                <template #label>
                    <span class="span-no">人数：{{item.number}}</span>
                </template>
                <template #right-icon>
                    <Button  type="primary" hairline size="small" style="opacity: 0.8;"
                        @click="clickAdd(item.id)">申请加入</Button>
                    
                </template>
            </Cell>
        </div>
        <div v-else class="container">
            <span class="span-no">{{ noText }}</span>
        </div>
        <Popup v-model:show="showPopup" closeable style="width: 80%;">
            <div style="padding: 10px;">
                <h3 class="h3-box">加入群聊申请</h3>
                <Form >
                    <Field v-model="addInfo.nickname" label="个人群呢称" label-class="label-title" type="text" maxlength="10"
                        placeholder="请输入昵称" show-word-limit :rules="[{ required: true, message: '昵称不能为空' }]" />
                    <Field v-model="addInfo.sayHello" rows="2" autosize label="申请留言" label-class="label-title1" type="textarea" maxlength="20"
                        placeholder="请输入申请留言" show-word-limit :rules="[{ required: true, message: '申请留言不能为空' }]" />
                    <div style="margin: 16px;">
                        <Button round block type="primary" @click="sumbitAdd" size="small">
                            确 认
                        </Button>
                    </div>
                </Form>
            </div>
        </Popup>
    </div>
</template>
<script setup>
import { Cell, Image, Icon, SwipeCell, Dialog, Tag, Button, Popup, Form, Field } from 'vant';
import { getOssPrefix } from '@/v-api/properties';
import { computed, reactive, ref } from 'vue';
import { addGroup } from '@/v-api/addressbook/group';
const prefix = getOssPrefix();
const showPopup = ref(false);
const addInfo=reactive({
    groupId:null,
    nickname:'',
    sayHello:''
})
const props = defineProps({
    searchData: {
        type: Object,
        default: null,
    },
    noText: {
        type: String,
    }
});
const sumbitAdd=()=>{
   addInfo.userId=props.searchData.id;
   addGroup(addInfo); 
   showPopup.value=false;
}
const visible = computed(() => {
    if (props.searchData===null) return false;
    return true;
});
const clickAdd = (id) => {
    showPopup.value = true;
    addInfo.groupId=id;
}
</script>
<style scoped>
.avatar-icon {
    width: 46px;
    height: 46px;
    border-radius: 20%;
    color: #cbf3bd;
    /* margin-left: 0.25rem; */
    margin-right: 0.3rem;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto
}

.span-name {
    font-size: 16px;
    color: #000;
}

.span-no {
    font-size: 14px;
    color: #8c8c8c;
    margin-top: 10%;
}
.label-title {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #dbf5d2;
    color: #3ed607;
    font-weight: bold;
    font-size: 13px;
}
.label-title1 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5d3d2;
    color: #d63707;
    font-weight: bold;
    font-size: 13px;
}
.h3-box {
    font-size: 15px;
    color: #000;
    margin-left: 2.5rem;
}
</style>